<template>
  <div class="app-container">
    <!--    搜索项-->
    <div class="search_bar">

      <el-form size="small" :inline="true" label-width="68px">
        <el-form-item label="问题概述">
          <el-input
            v-model="sea_form.faqName"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="问题类型">
          <el-select
            placeholder="请选择"
            v-model="sea_form.faqTypeId"
            filterable
          >
            <el-option
              v-for="item in typeList"
              :key="item.faqTypeId"
              :label="item.faqTypeName"
              :value="item.faqTypeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="search_btns">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getdataBysearch"
          >搜索
          </el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
          >重置
          </el-button
          >
        </el-form-item>
      </el-form>

    </div>
    <!--    操作按钮-->
    <div class="btns">
      <div>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addQuestion()">新增</el-button>
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multipleSelection.length==0" @click="delmorefaq()">
          删除
        </el-button>
      </div>
      <div>
        <el-button type="primary" size="mini" @click="TypeStore">问题类型管理</el-button>
      </div>
    </div>
    <!--    表格-->
    <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" id="table_sort">
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column label="排序" align="center" prop="type" width="55">
        <template slot-scope="scope">
          <div style="cursor: pointer">
            <i class="el-icon-sort handleicon"></i>
            <!--            <i class="el-icon-sort-down"></i>-->
          </div>
        </template>
      </el-table-column>
      <el-table-column label="序号" align="center" prop="sort" width="55"/>
      <el-table-column label="问题题干" align="center" prop="faqStem">
        <template slot-scope="scope">
          <div v-html="scope.row.faqName"></div>
        </template>
      </el-table-column>
      <el-table-column label="问题类型" align="center" prop="faqTypeName" width="100"/>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            v-preventReClick
            size="mini"
            type="text"

            @click="handleDetail(scope.row.faqId)"
          >查看
          </el-button
          >
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            @click="setQuestion(scope.row)"
          >修改
          </el-button
          >
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            @click="delFaq(scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <questionType ref="questiontype"></questionType>
    <addQuestion ref="addquestion"></addQuestion>
    <problemdetail ref="problemdetail"></problemdetail>
  </div>

</template>
<script>
import questionType from './commponents/questionType'
import addQuestion from './commponents/addcommonQuestion'
import Sortable from 'sortablejs'
import { getfaqlist, getfaqTypelist, sortfaq, deletefaq } from '@/api/commonproblem/problem'
import problemdetail from './commponents/problemdetail'

export default {
  components: { questionType, addQuestion, problemdetail },
  name: 'commonProblem',
  data() {
    return {
      // 搜索条件
      sea_form: {
        faqName: '',
        faqTypeId: ''
      },
      loading: '',
      postList: [
        {
          id: 1,
          sort: 1,
          questionTitle: '如何创建课程1？',
          questionType: '课程创建'
        },
        {
          id: 2,
          sort: 2,
          questionTitle: '如何创建课程？',
          questionType: '课程创建'
        }
      ],
      multipleSelection: [],
      sortable: void 0,
      typeList: []
    }
  },
  mounted() {
    this.getquestionList()
    this.getTypelist()
    this.$nextTick(() => {
      this.rowDrop()
    })

  },
  methods: {
// 搜索
    getdataBysearch() {
      // 发送获取信息请求
      this.getquestionList()
    },
    // 获取问题
    getquestionList() {
      this.loading = true
      getfaqlist(this.sea_form).then(res => {
        if (res.code == 200) {
          this.postList = res.data
        }
      }).catch(() => {
        this.loading = false
      }).finally(() => {
        this.loading = false
      })

      // 发送请求
    },
    // 获取问题类型
    async getTypelist() {
      let res = await getfaqTypelist()
      if (res.code == 200) {
        this.typeList = res.data
      }
      console.log(res, 'faqTypelist')
    },
    // 重置

    resetSearch() {
      this.sea_form = {
        faqName: '',
        faqTypeId: ''
      }
      this.getdataBysearch()
    },
    // 问题类型管理
    TypeStore() {
      this.$refs.questiontype.show()
    },
    // 新增问题
    addQuestion() {
      this.$refs.addquestion.show()
    },
    // 修改问题
    setQuestion(row) {
      this.$refs.addquestion.show(row)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 表格行拖拽
    rowDrop() {
      const el = document.querySelector('#table_sort .el-table__body-wrapper tbody')
      this.sortable = new Sortable(el, {
        animation: 150,
        handle: '.handleicon',
        ghostClass: 'blue-background-class',
        disabled: false,
        onEnd: (/**Event*/evt) => {
          this.setNodeSort(evt.oldIndex, evt.newIndex)
        }
      })
    },
    // 拖拽完成更新数据
    setNodeSort(oldIndex, newIndex) {
      const arr = JSON.parse(JSON.stringify(this.postList))
      const currRow = arr.splice(oldIndex, 1)[0]
      arr.splice(newIndex, 0, currRow)
      this.postList = []
      this.$nextTick(() => {
        this.postList = JSON.parse(JSON.stringify(arr))
        this.postList.forEach((item, index) => {
          item.sort = index + 1
        })
        this.setSort()
      })

    },
    // 排序接口
    async setSort() {
      let ccFaqList = this.postList.map(item => {
        return {
          faqId: item.faqId,
          sort: item.sort
        }
      })
      let res = await sortfaq({ ccFaqList: ccFaqList })
      console.log(res)
      if (res.code == 200) {
      }
      this.$message.success('调整成功')
    },
    // 删除
    delFaq(row) {
      this.$confirm(`是否确认删除该问题?`, '提示').then(() => {
        let arr = []
        arr.push(row.faqId)
        this.delQuestion(arr.join(','))

      }).catch(() => {
        this.$message.info('取消删除')
      })

    },
    // 批量删
    delmorefaq() {

      let arr = this.multipleSelection.map(item => {
        return item.faqId
      })
      console.log(arr, 'this.multipleSelection')
      this.$confirm(`是否确认删除所选问题?`, '提示').then(() => {
        this.delQuestion(arr.join(','))
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    // 删除
    delQuestion(ids) {
      deletefaq(ids).then(res => {
        console.log(res)
        if (res.code == 200) {
        }
        this.$message.success('删除成功')
        this.getquestionList()
      })
    },
    // 查看
    handleDetail(id) {
      this.$refs.problemdetail.show(id)
    }

  }
}
</script>
<style scoped lang="scss">
.search_bar {
  padding: 20px 20px 0 20px;
  background-color: #fafafa;
  box-sizing: border-box;

  .search_btns {
    float: right;
  }
}

.btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

</style>
